<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="j2j/core/j2j.js">
        </script>
        <script type="text/javascript" src="mvc.js">
        </script>
        <script type="text/javascript" src="j2j/utils/HashMap.js">
        </script>
        <script type="text/javascript" src="xclab/utils/Logger.js">
        </script>
        <script type="text/javascript" src="j2j/dom/QueryBuilder.js">
        </script>
        <script type="text/javascript" src="j2j/dom/Query.js">
        </script>
        <script type="text/javascript" src="j2j/dom/Geometry.js">
        </script>
        <script type="text/javascript" src="j2j/dom/Template.js">
        </script>
        <script type="text/javascript" src="j2j/css/Css.js">
        </script>
        <script type="text/javascript" src="unit/TestRunner.js">
        </script>
        <!--<script type="text/javascript" src="xclab/utils/TaskMgr.js">
        </script>-->
        <script type="text/javascript" src="xclab/utils/Task.js">
        </script>
        <script type="text/javascript" src="j2j/event/EventMgr.js">
        </script>
        <script type="text/javascript" src="j2j/event/EventTarget.js">
        </script>
        <script type="text/javascript" src="j2j/patterns/Decorator.js">
        </script>
        <script type="text/javascript" src="j2j/effect/Magic.js">
        </script>
        <script type="text/javascript" src="j2j/effect/Moveable.js">
        </script>
        <script type="text/javascript" src="j2j/effect/dnd/DragProxyBuilder.js">
        </script>
        <script type="text/javascript" src="j2j/effect/dnd/DragProxy.js">
        </script>
        <script type="text/javascript" src="j2j/effect/dnd/Dragable.js">
        </script>
        <script type="text/javascript" src="j2j/effect/dnd/Dropable.js">
        </script>
        <script type="text/javascript" src="j2j/effect/dnd/Dispatcher.js">
        </script>
        <script type="text/javascript" src="j2j/effect/Slideable.js">
        </script>
		<script type="text/javascript" src="j2j/net/Ajax.js"></script>
        <script type="text/javascript" src="j2j/widgets/Input.js">
        </script>
        <link type="text/css" href="app.css" rel="stylesheet" media="screen" id="1">
        <style type="text/css">
            h1 {
                background-color: green;
            }
        </style>
        <script type="text/javascript">
            Package("com.earthbook.blog.ui.view").Class("ApplicationMediator", {
                ApplicationMediator: function(){
                    log.clear();
                    log.info('everything is ok!');
                    var count = 50;
                    var tpl = ["<table id='tab1'>"];
                    var str = "<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td></tr>";
                    var rstr = "<img src=./Hardware/{0}.png id={1} alt='sorry' unselectable='on'/>";
                    var getStr = new j2j.dom.Template(str);
                    var getRstr = new j2j.dom.Template(rstr);
                    for (var i = 0; i < count; i++) {
                        tpl.push(getStr(getRstr(i, i), getRstr(++i, i), getRstr(++i, i), getRstr(++i, i)));
                    }
                    tpl.push("</table>");
                    tpl = tpl.join("");
                    var div1 = document.createElement("div");
                    var dragElements = [];
                    new j2j.dom.Query("#container").exec()[0].appendChild(div1);
                    window.setTimeout(function(){
                        div1.innerHTML = tpl;
                        for (i = 0; i < count; i++) {
                            dragElements[i] = j2j.effect.Magic.makeDragable({
                                selector: "#" + i,
                                type: "sey",
                                onDragend: function(e){
                                    log.info("i drop!");
                                }
                            });
                        }
                    }, 500);
                    var dropZone1 = j2j.effect.Magic.makeDropable({
                        selector: "#xy",
                        type: "sey",
                        onDrop: function(config){
                            var e = config.e;
                            var self = config.self;
                            var child = e.data;
                            var childparent = child.parentNode;
                            var cpp = childparent.parentNode;
                            self.appendChild(child);
                            cpp.removeChild(childparent);
                            if (!cpp.childNodes.length) {
                                cpp.parentNode.removeChild(cpp);
                            }
                        }
                    });
                    var dropZone = j2j.effect.Magic.makeDropable({
                        selector: "#xx table",
                        type: "sey",
                        onDrop: function(config){
                            var e = config.e;
                            var self = config.self;
                            var child = e.data;
                            if (!self.rows.length) 
                                var row = self.insertRow(-1);
                            var row = self.rows.item(self.rows.length - 1) ? self.rows.item(self.rows.length - 1) : self.insertRow(-1);
                            var cells = row.cells;
                            if (cells.length == 4) 
                                row = self.insertRow(-1);
                            var cell = row.insertCell(-1);
                            cell.appendChild(child);
                        }
                    });
                    var moveZone = j2j.effect.Magic.makeMoveable({
                        selector: "#xy",
                        proxy: "#title"
                    });
                    var moveZone1 = j2j.effect.Magic.makeMoveable({
                        selector: "#xx"
                    });
                    var slidebody = j2j.effect.Magic.makeSlideable({
                        selector: "body",
                        time: 1,
                        fps: 50,
                        direction: "y"
                    });
                    this.listNotificationInterests = function(){
                        return [facade.SHUTDOWN];
                    };
                    this.handleNotification = function(note){
                        switch (note.name) {
                            case "shutdown":{
                                for (var i = 0; i < dragElements.length; i++) {
                                    dragElements[i].finalize();
                                }
                                dropZone.finalize();
                                dropZone1.finalize();
                                moveZone.finalize();
                                moveZone1.finalize();
                                slidebody.finalize();
                                System.gc();
                                
                            }
                        }
                    };
                },
                Extends: xclab.mvc.patterns.mediator.Mediator
            });
            Package("com.earthbook.blog.ui.controller").Class("PreModelCommand", {
                PreModelCommand: function(){
                },
                Prototype: {
                    execute: function(note){
                        var ApplicationMediator = com.earthbook.blog.ui.view.ApplicationMediator;
                        var am = new ApplicationMediator(note.getBody());
                        this.facade.registerMediator(am);
                    }
                },
                Extends: xclab.mvc.patterns.command.SimpleCommand
            });
            
            
            Package("com.earthbook.blog.ui.controller").Class("ApplicationStartupCmd", {
                ApplicationStartupCmd: function(){
                },
                Prototype: {
                    initializeMacroCommand: function(){
                        var PreModelCommand = com.earthbook.blog.ui.controller.PreModelCommand;
                        this.addSubCommand(PreModelCommand);
                    }
                },
                Extends: xclab.mvc.patterns.command.MacroCommand
            });
            
            Package("com.earthbook.blog.ui.controller").Class("ApplicationShutdownCmd", {
                ApplicationShutdownCmd: function(){
                },
                Prototype: {
                    execute: function(note){
                        log.info("shutdown!");
                        System.gc();
                    }
                },
                Extends: xclab.mvc.patterns.command.SimpleCommand
            });
            
            Package("com.earthbook.blog.ui").Class("ApplicationFacade", {
                ApplicationFacade: function(){
                },
                Prototype: {
                    initializeController: function(){
                        var ApplicationStartupCmd = com.earthbook.blog.ui.controller.ApplicationStartupCmd;
                        var ApplicationShutdownCmd = com.earthbook.blog.ui.controller.ApplicationShutdownCmd;
                        this.Super.initializeController.apply(this, arguments);
                        this.registerCommand("startup", ApplicationStartupCmd);
                        this.registerCommand("shutdown", ApplicationShutdownCmd);
                    },
                    startup: function(app){
                        this.sendNotification("startup", app);
                    },
                    shutdown: function(app){
                        this.sendNotification("shutdown", app);
                    },
                    SHUTDOWN: "shutdown"
                },
                Extends: xclab.mvc.patterns.facade.Facade
            });
            Import("com.earthbook.blog.ui.ApplicationFacade", window);
            var facade = ApplicationFacade.getInstance();
        </script>
    </head>
    <body onload="facade.startup(this);" onunload="facade.shutdown(this);">
        <div id="container">
            <h1>Earth Book</h1>
            <input type="button" onclick="j2j.css.Css.changeSkin('app2.css',1);" value="aaaaaaaa"><input type="button" onclick="j2j.css.Css.changeSkin('app.css',1);" value="aaaaaaaa">
            <div id ="xx">
                <table>
                    <caption>
                        Very Good
                    </caption>
                </table>
            </div>
            <div id="xy">
                <div id="title" class="title">
                </div>
            </div>
        </div>
    </body>
</html>

